<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>公司论坛</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/index/advise/add' }">发布意见</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row class="margintop20">
      <el-col>
        <el-steps :active="active" align-center finish-status="success">
          <el-step title="添加意见主题" description="欢迎踊跃指出我们的不足之处."></el-step>
          <el-step title="添加意见内容" description="你的一次小小的指正,都将是我们莫大的进步."></el-step>
          <el-step title="发表意见" description="感谢你的意见,欢迎再次指正."></el-step>
        </el-steps>
      </el-col>
      <el-col class="margintop20">
        <div v-show="active==1" style="width:30%">
          <el-form
            :model="form"
            :rules="rules"
            ref="myform"
            label-width="100px"
            label-position="top"
            class="myform"
          >
            <el-form-item label="意见标题" prop="title">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="意见分类" prop="category">
              <el-cascader
                style="width:100%"
                v-model="form.category"
                :options="options"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-form>

          <el-button type="primary" @click="gotonextone">下一步</el-button>
        </div>
        <div v-show="active==2">
          <quill-editor
            v-model="form.content"
            ref="advisecontent"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
          <div class="margintop20">
            <el-button type="danger" @click="active--">上一步</el-button>
            <el-button type="primary" @click="gotonext">下一步</el-button>
          </div>
        </div>
        <div v-show="active==3">
          <el-button type="danger" @click="active--">上一步</el-button>
          <el-button type="success" @click="addtosome">发表意见</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { advacecatetory } from "@/utils";
import { addadvise } from "@/api";
export default {
  data() {
    return {
      editorOption: {
        theme: "snow",
      },
      options: advacecatetory,
      active: 1,
      rules: {
        title: [{ required: true, message: "请输入意见标题", trigger: "blur" }],
        category: [
          { required: true, message: "请选择意见分类", trigger: "change" },
        ],
      },
      form: {},
    };
  },
  methods: {
    addtosome() {
      this.form.category = this.form.category.join(",");
      addadvise(this.form)
        .then((res) => {
          if (res.type) {
            this.$router.push({ name: "adviselist" });
          }
        })
        .catch((err) => {});
    },
    onEditorBlur() {},
    onEditorFocus() {},
    onEditorChange() {},
    handleChange() {},
    gotonextone() {
      this.$refs.myform.validate((valid) => {
        if (valid) {
          this.active++;
        } else {
          this.$message.error("请先完善意见信息");
          return false;
        }
      });
    },
    gotonext() {
      if (this.form.content) {
        this.active++;
      } else {
        this.$message.error("请先完善意见");
      }
    },
  },
};
</script>


<style lang="scss" >
.ql-editor {
  height: 250px;
}
</style>